<template>
    <div >
        <el-container>
            <el-aside>
                <asidecomp width="100%"></asidecomp>
            </el-aside>
        <el-container>
            <el-header :style="{ background: mainColor, color: textColor }">
                <el-row class="header-row">
                <el-col :span="12">
                    <h1>文献收藏页</h1>
                </el-col>
                <el-col :span="12" class="search-col">
                    <el-form :inline="true">
                    <el-form-item label="搜索文献:">
                        <el-input v-model="searchTerm" @input="searchDocuments" />
                    </el-form-item>
                    </el-form>
                </el-col>
                </el-row>
            </el-header>
            <el-scrollbar height="100vh">
                <el-main :style="{ background: backColor, color: textColor, width: '100%' }">
                    <el-row>
                        <el-col :span="24">
                            <el-alert
                                v-if="documents.length === 0"
                                title="暂无收藏的文献"
                                type="info"
                                show-icon
                            />
                            <div v-for="document in documents" :key="document.id" class="document-item">
                                <h2>{{ document.title }}</h2>
                                <p class="info">作者: {{ document.authors.join(', ') }}</p>
                                <p class="info">收藏日期: {{ document.collectionDate }}</p>
                                <el-button @click="removeDocument(document.id)" type="danger" size="mini">下载</el-button>
                                <el-button @click="removeDocument(document.id)" type="danger" size="mini">前往</el-button>
                                <el-button @click="removeDocument(document.id)" type="danger" size="mini">移除</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-main>
            </el-scrollbar>
            <!--
                <el-pagination
                    background="mainColor"
                    :page-size="20"
                    :pager-count="11"
                    layout="prev, pager, next"
                    :total="1000"
                    :style="{ background: mainColor, color: textColor }"
                />
            -->
            
        </el-container>
    </el-container>
    </div>
</template>
  
<script>
import asidecomp from '@/views/account-manage-views/components/aside.vue'
export default {
    components:{
        asidecomp: asidecomp,
    },
    data() {
        return {
            documents: this.$store.state.documents, // 测试文献，后续删除
            searchTerm: '',
            mainColor: '#25354c',
            backColor: '#0F1522',
            textColor: '#ffffff',
        };
    },
    methods: {
        removeDocument(documentId) {
            // 移除文献
            this.documents = this.documents.filter(doc => doc.id !== documentId);
        },
        searchDocuments() {
            // 根据关键词搜索文献
            const searchTerm = this.searchTerm.toLowerCase();
            this.documents = this.documents.filter(
                doc =>
                doc.title.toLowerCase().includes(searchTerm) ||
                doc.authors.some(author => author.toLowerCase().includes(searchTerm)) ||
                doc.keywords.some(keyword => keyword.toLowerCase().includes(searchTerm))
            );
        }
    }
};
</script>
  
<style scoped>
body {
    --el-color-primary: var(--main-color);
    --el-background-color-primary: var(--back-color);
    --el-text-color-primary: var(--text-color);
}

.el-container {   
    height: 100vh;
}

.header-row {
  display: flex;
  align-items: center;
}

.el-main {
    overflow: auto;
}
.search-col {
  text-align: right;
  margin-right: 10px; /* 可调整右边距 */
}
.document-item {
    background-color: var(--back-color);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    position: relative; 
    overflow: hidden; 
    transition: transform 0.2s; /* 添加过渡效果 */

    /* 鼠标悬停时的样式 */
    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* 外发光效果 */
    }
} 

.el-row,
.el-col {
    margin: 0;
}
  
.info {
    color: #ccc; 
}


</style>